<!--tab切换-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="../../utils/css/bootstrap.min.css" />
  <script src="../../utils/jquery/jquery.3.7.min.js"></script>
  <script src="../../utils/js/bootstrap.bundle.js"></script>
    <style>
        ul{
            margin: 0 auto;
            padding: 0;

        }
        li{
            list-style: none;
        }

        .table-list{
            width:200px;
            display: flex;
        }
        .table-list ul{
            display:none
        }
        .curr{
            color:skyblue;
            display:block;
        }
    </style>
</head>
<body>
<ul class="table-list">
    <li class="item1">
        <div class="tab-title" id="link1">Link1</div>
        <ul>
            <li>1-1</li>
            <li>1-2</li>
            <li>1-3</li>
        </ul>
    </li>
    <li class="item2">
        <div class="tab-title" id="link2">Link2</div>
        <ul>
            <li>2-1</li>
            <li>2-2</li>
            <li>2-3</li>
        </ul>
    </li>
    <li class="item3">
        <div class="tab-title" id="link3">Link3</div>
        <ul>
            <li>3-1</li>
            <li>3-2</li>
            <li>3-3</li>
        </ul>
    </li>
</ul>
</body>
<script type="text/javascript">
    // 多库重新定义jq全局函数
    // const defjq=$.noConflict();
   // 1.层叠结构
   $(document).ready(function(){
       // $('.tab-title').click(function(){
           // const _this=this
           // $('.tab-title').each(function(i,e){
           //     //注意这里this指向问题 dom元素转jq元素获取使用数组索引
           //    if($(this)[0].id!==$(_this)[0].id){
           //        $(this).css('color','black')
           //        // $(this).next().css('display','none')
           //        $(this).next().css('color','black').slideUp()
           //    }else{
           //        $(this).css('color','skyblue')
           //        // $(this).next().css('display','block')
           //        $(this).next().css('color','orange').slideDown()
           //    }
           // })
           // })
       // 2. 事件切换 hover  如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
       $(".tab-title").hover(function() {
           $(this).next().stop().slideToggle().toggleClass("curr");
       });
   })
</script>
</html>